const tooltip = d3.select("body")
            .append("div")
            .attr("id", "tooltip")
            .style("position", "absolute")
            .style("background", "white")
            .style("border", "1px solid #ccc")
            .style("border-radius", "5px")
            .style("display", "none");


function drawBar(data,ySvg,svg){
    //画y轴
    const yScale=d3.scaleBand()
    .domain(data.map(item=>{
        return item.player
    }))
    .range([0,2000])
    .padding(0.1);

    const yAxis=d3.axisLeft(yScale)

    ySvg.append('g')
    .attr('transform',`translate(${margin.left+60},0)`)
    .call(yAxis)

    //画x轴
    for(let i=0;i<5;i++){
        let ox=i*165+81
        const xScale=d3.scaleLinear()
        .domain([0, d3.max(data.map(item=>{
            switch(i){
                case 0:
                    return item.KDA
                case 1:
                    return item.participationRate
                case 2:
                    return item.avgHelp
                case 3:
                    return item.avgKill
                case 4:
                    return item.avgDie
            }
        }))])
        .range([0,150])

        const xAxis = d3.axisBottom(xScale)

        svg.append('g')
            .attr('transform',`translate(${margin.left+60+i*165},${margin.bottom})`)
            .call(xAxis)
            .append('text')
            .attr('x',70)
            .attr('y',60)
            .attr("font-size", "12px") // 确保字体大小合适
            .attr("fill", "black") // 确保填充颜色可见
            .text(getText(i))

        //画矩形
        const rectGroup=ySvg.append('g')

        rectGroup.selectAll('rect')
        .data(data)
        .enter()
        .append('rect')
        .on("mouseover", function(e,d) {
            const tooltip = d3.select("#tooltip");
            tooltip.style("display", "block");
            tooltip.html(`队伍：${d.team}<br/>
                          选手：${d.player}<br/>
                          KDA：${d.KDA}<br/>
                          场均杀敌：${d.avgKill}<br/>
                          场均助攻：${d.avgHelp}<br/>
                          场均死亡：${d.avgDie}<br/>
                          参团率：${d.participationRate}`);
            tooltip.style("left", (e.pageX + 10) + "px")
            .style("top", (e.pageY + 10) + "px");
            d3.select(this)
                .attr("stroke","black")
                .attr("stroke-width", 3)

            const rect = d3.select(this);
            const originalX = parseFloat(rect.attr("x"));

            // 抖动动画
            rect.transition()
                .duration(100) // 动画持续时间
                .ease(d3.easeBounce) // 使用弹跳缓动函数
                .attrTween("x", function() {
                    return d3.interpolateNumber(originalX, originalX - 5); // 在原始位置左右抖动
                })
                .transition()
                .duration(100)
                .ease(d3.easeBounce)
                .attrTween("x", function() {
                    return d3.interpolateNumber(originalX - 5, originalX + 5);
                })
                .transition()
                .duration(100)
                .ease(d3.easeBounce)
                .attrTween("x", function() {
                    return d3.interpolateNumber(originalX + 5, originalX);
                });
        })
        .on("mouseout", function() {
            const tooltip = d3.select("#tooltip");
            tooltip.style("display", "none");
            d3.select(this)
                .attr("stroke-width", 0);

            d3.select(this)
                .transition()
                .duration(200) // 动画持续时间
                .attr("x", (d, i) => {
                    return ox
                }); // 恢复原始位置
        })
        .attr('x',()=>{
            return i*165+81
        })
        .attr('y',(item,index)=>{
            return yScale(item.player)
        })
        .attr('height',yScale.bandwidth())
        .transition()
        .duration(1000)
        .attr('width',(item,index)=>{
            switch(i){
                case 0:
                    return xScale(item.KDA)
                case 1:
                    return xScale(item.participationRate)
                case 2:
                    return xScale(item.avgHelp)
                case 3:
                    return xScale(item.avgKill)
                case 4:
                    return xScale(item.avgDie)
            }
        })
        .attr("fill", (item)=>{
            switch(i){
                case 0:
                    return 'gold'
                case 1:
                    return '#E56720'
                case 2:
                    return '#8CBED6'
                case 3:
                    return '#FF3800'
                case 4:
                    return '#800000'
            }
        })
    }
}